<template>
  <div :class="['drawer',`drawer-${direction}`]" v-if="drawerShow">
    <div :class="['drawerInner',drawerShow?`${direction}-animation`:'']">
      <div class="header">
        <slot name="header">{{title}}</slot>
      </div>
      <div class="body">
        <slot name="body"></slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "drawer",
    props: {
      drawerShow: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
      },
      direction: {
        type: String,
        default: 'right',
        validator: function (value) {
          if (['left', 'right', 'top', 'bottom'].indexOf(value) !== -1) {
            return true;
          }
          console.warn('direction 只能传一下参数：left right top bottom')
        }
      },
    },
    methods: {
      close () {
          this.$emit('update:drawerShow', false)
      }
    }
  }
</script>

<style lang="scss" scoped>
.drawer {
  min-width:260px;
  height: 100%;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2000;
  .drawerInner {
    background: white;
    position: absolute;
      box-shadow: 0 0 6px 0;
    .header {
      line-height: 60px;
      padding-left: 20px;
      font-size: 16px;
      border-bottom: 1px solid #cccccc;
    }
  }
}

.drawer-right {
  .drawerInner {
    min-width: 280px;
    height: 100%;
    right: 0;
    top: 0;
  }
}

.drawer-left {
  .drawerInner {
    min-width: 400px;
    height: 100%;
    left: 0;
    top: 0;
  }
}

.drawer-top {
  .drawerInner {
    width: 100%;
    min-height: 150px;
    left: 0;
    top: 0;
  }
}

.drawer-bottom {
  .drawerInner {
    width: 100%;
    min-height: 150px;
    left: 0;
    bottom: 0;
  }
}

/**
* 右侧进入动画
*/
@keyframes right-animation {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@-webkit-keyframes right-animation /*Safari and Chrome*/ {
  from {
    -webkit-transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(0);
  }
}

.right-animation {
  animation: right-animation 0.35s cubic-bezier(0.4, 0.4, 0.25, 1);
  -webkit-animation: right-animation 0.35s cubic-bezier(0.4, 0.4, 0.25, 1); /* Safari 和 Chrome */
}

/**
* 左侧进入动画
*/
@keyframes left-animation {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@-webkit-keyframes left-animation /*Safari and Chrome*/ {
  from {
    -webkit-transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(0);
  }
}

.left-animation {
  animation: left-animation 0.35s cubic-bezier(0.4, 0.4, 0.25, 1);
  -webkit-animation: left-animation 0.35s cubic-bezier(0.4, 0.4, 0.25, 1); /* Safari 和 Chrome */
}

/**
* 顶部侧进入动画
*/
@keyframes top-animation {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@-webkit-keyframes top-animation /*Safari and Chrome*/ {
  from {
    -webkit-transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
  }
}

.top-animation {
  animation: top-animation 0.35s cubic-bezier(0.4, 0.4, 0.25, 1);
  -webkit-animation: top-animation 0.35s cubic-bezier(0.4, 0.4, 0.25, 1); /* Safari 和 Chrome */
}

/**
* 底部侧进入动画
*/
@keyframes bottom-animation {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@-webkit-keyframes bottom-animation /*Safari and Chrome*/ {
  from {
    -webkit-transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0);
  }
}

.bottom-animation {
  animation: bottom-animation 0.35s cubic-bezier(0.4, 0.4, 0.25, 1);
  -webkit-animation: bottom-animation 0.35s cubic-bezier(0.4, 0.4, 0.25, 1); /* Safari 和 Chrome */
}
</style>